<template>
    <div class="container">
        <div class="model">
            <div class="phone">
                <div class="camera"></div>
                <div class="screen">
                    <div class="content">
                        <div v-html="valueHtml"></div>
                    </div>
                </div>
                <div class="home-button"></div>
            </div>
        </div>

        <div style="height: 50%;width: 50%;">
            <div>
                <div style="border: 1px solid #ccc" class="text_container">
                    <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                        mode="default" />
                    <Editor style="height: 200px;" v-model="valueHtml" :defaultConfig="editorConfig" mode="default"
                        @onCreated="handleCreated" />
                </div>
            </div>
            <div>
                <el-button style="margin: 0 auto" @click="getEditorHTML">获取富文本HTML内容</el-button>
            </div>
        </div>
    </div>
</template>



<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import { $_add_content, $_get_content } from "@/api/user";
import { useRoute } from 'vue-router';
import { commonMessage } from '@/utils';
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const route = useRoute();
const lists_id = ref(route.query.lists_id);
const course_id = ref(route.query.course_id);
const valueHtml = ref('<p>hello</p>')
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }
const id = ref('')


const handleCreated = (editor) => {
    editorRef.value = editor
}
const getEditorHTML = () => {
    // console.log(editorRef.value.getHtml());
    $_add_content({
        lists_id: lists_id.value,
        course_id: course_id.value,
        content: valueHtml.value,
        id:id.value?id.value:'',
    }).then(res => {
        console.log(res);
        commonMessage(res.msg)
    })
};

const getContent = () => {
    $_get_content({
        lists_id: lists_id.value,
    }).then(res => {
        if (res.result.length > 0) {
            valueHtml.value = res.result[0].content;
            id.value=res.result[0].id
            commonMessage(res.msg)
        }
    })
}
getContent()



</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    .model {
        width: 40%;
        height: 100%;
        background-color: pink;
        display: flex;
        justify-content: center;
        align-items: center;

        .phone {
            width: 80%;
            height: 80%;
            background-color: #333;
            border-radius: 40px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
        }

        .camera {
            width: 20px;
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 10px;
            left: 50%;
            transform: translateX(-50%);
        }

        .screen {
            width: 90%;
            height: 85%;
            background-color: #fff;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 30px;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .content {
            width: 96%;
            height: 96%;
            // display: flex;
            // justify-content: center;
            // align-items: center;
            padding: 12px;
            box-sizing: border-box;
            background-color: #f9f9f9;

            border-radius: 20px;
            box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        }

        .home-button {
            width: 40px;
            height: 40px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
    }


}
</style>